<script>
	let visible = false;
</script>

<div class="py-5 mt-5 ">
	<input type="checkbox" on:click={() => (visible = !visible)} class="-ml-24 " />
	<svg viewBox="0 0 400 400" class="w-64">
		<g>
			<circle
				fill="none"
				stroke="#68E534"
				stroke-width="20"
				cx="200"
				cy="200"
				r="190"
				class={visible ? 'svgcircle circle' : 'circle'}
				stroke-linecap="round"
				transform="rotate(-90 200 200) "
			/>
			<polyline
				fill="none"
				stroke="#68E534"
				stroke-width="24"
				points="88,214 173,284 304,138"
				stroke-linecap="round"
				stroke-linejoin="round"
				class={visible ? 'svgtick tick' : 'tick'}
			/>
		</g>
	</svg>

	<h2>Payment Success</h2>
</div>

<style>
	h2 {
		font-family: Helvetica;
		font-size: 36px;
		margin-top: 40px;
		/* color: #333; */
		opacity: 0;
	}

	input[type='checkbox']:checked ~ h2 {
		animation: 0.6s title ease-in-out;
		animation-delay: 1.2s;
		animation-fill-mode: forwards;
	}

	.circle {
		stroke-dasharray: 1194;
		stroke-dashoffset: 1194;
	}

	.svgcircle {
		animation: circle 0.6s ease-in-out;
		animation-fill-mode: forwards;
	}

	.tick {
		stroke-dasharray: 350;
		stroke-dashoffset: 350;
	}

	.svgtick {
		animation: tick 0.5s ease-out;
		animation-fill-mode: forwards;
		animation-delay: 0.49s;
	}

	@keyframes circle {
		from {
			stroke-dashoffset: 1194;
		}
		to {
			stroke-dashoffset: 2388;
		}
	}

	@keyframes tick {
		from {
			stroke-dashoffset: 350;
		}
		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes title {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
</style>
